<template>
  <div class="track-container">
    <div class="track-card">
      <div class="status">
        <span>
          <i class="dot bgcGreen"></i>
          已打卡
        </span>
        <span>
          <i class="dot bgcRed"></i>
          未打卡
        </span>
      </div>
      <div class="status">
        <span>
          <i class="sign green"></i>
          哮喘良好控制
        </span>
        <span>
          <i class="sign orange"></i>
          哮喘加重
        </span>
        <span>
          <i class="sign red"></i>
          急性发作
        </span>
      </div>
      <Xm-Calendar :recordData="recordData" @update="update"></Xm-Calendar>
    </div>
    <div class="track-info">
      <p>当日详情</p>
      <p>用药打卡时间：</p>
      <span v-for="(item, index) in drugRecords" :key="index">
        {{
          item.planDate +
          '-' +
          (item.type ? (item.type === 1 ? '规律用药' : '应急用药') : '中医用药')
        }}
        --
        {{
          item.areaType === 'cnUse'
            ? '中医打卡'
            : item.areaType === 'red'
            ? '红区'
            : item.areaType === 'green'
            ? '绿区'
            : '黄区'
        }}
      </span>
      <!-- <span>常规用药-08:12</span>
      <span>应急用药-18:59</span> -->
      <p>症状检测时间：</p>
      <span v-for="(item, index) in symptoms" :key="index">
        {{ item.createTime + '-' + item.result }}
      </span>
      <!-- <span>均无以上症状-08:50</span>
      <span>均无以上症状-18:00</span>
      <span>频繁咳嗽-19:00</span>
      <span>走路、说话困难，无法平卧-20:20</span> -->
    </div>
  </div>
</template>
<script>
  import XmCalendar from 'XMC/XmCalendar'
  import { ref, onMounted } from 'vue'
  import {
    loadMedicationRecord,
    loadMedicationRecordInfo,
  } from '@/api/modules/patient'
  import moment from 'moment'
  export default {
    components: { XmCalendar },
    props: { pid: String },
    setup(props) {
      const activeIndex = ref('1')
      const recordData = ref({})
      const drugRecords = ref([])
      const symptoms = ref([])
      const update = function (date) {
        loadData(date)
        console.log('date' + JSON.stringify(date))
        loadDataInfo(date)
      }
      const loadDataInfo = async function (date) {
        const startDate = moment(date).format('YYYY-MM-DD')
        const res = await loadMedicationRecordInfo({
          day: startDate,
          patientId: props.pid,
        })
        drugRecords.value = res.data.drugRecords
        symptoms.value = res.data.symptoms
      }
      const loadData = async function (date) {
        const maxDay = moment(date).daysInMonth()
        const startDate = moment(date).format('YYYY-MM')

        const res = await loadMedicationRecord({
          patientId: props.pid,
          startTime: startDate + '-1',
          endTime: startDate + '-' + maxDay,
        })
        const tmp = {}
        res.data.map((item) => {
          const oldType = tmp[item.planDate]
          const dict = { red: 3, yellow: 2, green: 1 }

          if (!oldType || dict[oldType] < dict[item.actionPlanType]) {
            tmp[item.planDate] = item.actionPlanType
          }
        })
        recordData.value = tmp
      }
      onMounted(() => {
        // loadData()
      })
      return {
        activeIndex,
        update,
        recordData,
        drugRecords,
        symptoms,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .track-container {
    margin-top: 20px;
    display: flex;

    .track-card {
      .status {
        padding: 10px 0px 0px 10px;
        font-size: 14px;

        span {
          margin-right: 30px;
        }

        .dot {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
        }

        .sign {
          display: inline-block;
          width: 24px;
          height: 10px;
          border-radius: 10px;
        }

        .green {
          background-color: #3dc388;
        }

        .orange {
          background-color: #f8ab39;
        }

        .red {
          background-color: #ff7d61;
        }
      }

      // 背景颜色
      .bgcGreen {
        background-color: #c5eefa;
      }

      .bgcRed {
        border: 1px solid #ff0000;
      }
    }

    .track-info {
      width: 250px;
      padding-left: 22px;

      p {
        line-height: 24px;
        font-size: 15px;
        color: #303133;

        &:nth-child(1) {
          line-height: 24px;
          font-size: 18px;
          color: #303133;
        }
      }

      span {
        display: block;
        padding: 0px 10px;
        margin-bottom: 5px;
        color: #666;
        font-size: 13px;
      }
    }
  }
</style>
